<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>

    <script>
        $(function () {
            $("#username").blur || $("#signupbtn").click(function () {
                var username = $("#username").val();//取值
                $.ajax({
                    "url": "data.txt",        //要提交的URL路径
                    "type": "GET",				//发送请求的方式
                    "data": {
                        "username": username
                    },		//要发送到服务器的数据	
                    "dataType": "text",			//指定返回的数据格式
                    "success": "callback",		//响应成功后要执行的代码
                    "error": function () {			//请求失败后要执行的代码
                        alert("用户名验证时出现错误，请稍后再试");
                    }
                }),
                    //响应成功的回调函数
                    function callback(data) {
                        if (data == "true") {
                            $("#nameSpan").html("用户名已被使用");
                        } else {
                            $("#nameSpan").html("用户名可以使用");
                        }
                    };
            })
        })
    </script>
</head>

<body>
    <form action="">
        用户名:<input type="text" id="username" name="username">
        <span id="nameSpan">(检测后这里会输出内容)</span><br>
        密码:<input type="text" id="password" name="password"><br />
        <input type="button" value="注册" id="signupBtn">
        <input type="button" value="登录" id="loginBtn">
    </form>
</body>

</html>